<template>
<div class="page-container">
  <div class="page-title">
    用户详情
  </div>
  <div class="accinfor_box">
    <div class="title_filx">
      <div class="div_style"></div>
      <div class="div_title">账户信息</div>
    </div>
    <div>
      <el-descriptions
        :column="2"
        border
      >
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            头像
          </div>
        </template>
        <img :src="accountInformationList.avatar" style="width: 60px;height: 60px">
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            昵称
          </div>
        </template>
        {{accountInformationList.nickname}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            手机号
          </div>
        </template>
        {{accountInformationList.mobile}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            ID
          </div>
        </template>
        {{accountInformationList.userId}}
      </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              账户状态
            </div>
          </template>
          {{accountInformationList.status?'停用':'正常'}}
        </el-descriptions-item>

<!--      <el-descriptions-item>-->
<!--        <template #label>-->
<!--          <div class="cell-item">-->
<!--            业务员名称-->
<!--          </div>-->
<!--        </template>-->
<!--        {{accountInformationList.agentName}}-->
<!--      </el-descriptions-item>-->
<!--        <el-descriptions-item>-->
<!--          <template #label>-->
<!--            <div class="cell-item">-->
<!--              权证名称-->
<!--            </div>-->
<!--          </template>-->
<!--          {{accountInformationList.warrantName}}-->
<!--        </el-descriptions-item>-->
      </el-descriptions>
    </div>
  </div>
  <div class="accinfor_box">
    <div class="title_filx">
      <div class="div_style"></div>
      <div class="div_title">基本信息</div>
    </div>
    <div>
      <el-descriptions
        :column="2"
        border
      >
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              姓名
            </div>
          </template>
          {{basicInformation.name}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              性别
            </div>
          </template>
         <span v-if="basicInformation.sex==1">男</span> 
         <span v-if="basicInformation.sex==2">女</span> 
         <span v-if="basicInformation.sex==3">未知</span> 
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              年龄
            </div>
          </template>
          {{basicInformation.age}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              户籍
            </div>
          </template>
          {{basicInformation.censusRegister}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              户口
            </div>
          </template>
          {{basicInformation.registeredHk}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              身份证号
            </div>
          </template>
          {{accountInformationList.identityCard}}
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>


  <div class="accinfor_box" v-if="carList">
    <div class="title_filx">
      <div class="div_style"></div>
      <div class="div_title">车辆信息</div>
    </div>

    <div v-for ="(item,index) in carList  ">

      <el-descriptions title="" :column="2" border>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              行业
            </div>
          </template>
          {{item.industry}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              车辆状态
            </div>
          </template>
          {{item.carState}}
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              车辆座位
            </div>
          </template>
          {{item.carNumber}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              车辆动力
            </div>
          </template>
          {{item.carPower}}
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              是否个人名下非运营
            </div>
          </template>
          {{item.isOperation}}
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              职务
            </div>
          </template>
          {{item.job}}
        </el-descriptions-item>


        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              全款车目前市场价
            </div>
          </template>
          <el-statistic title="" :value="item.totalPayment" value-style="font-size:14px"  />
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              按揭车剩余本金
            </div>
          </template>
          <el-statistic title="" :value="item.oddCorpus" value-style="font-size:14px"  />
        </el-descriptions-item>

      </el-descriptions>
    </div>
  </div>





  <div class="accinfor_box">
    <div class="title_filx">
      <div class="div_style"></div>
      <div class="div_title">贷款申请记录</div>
    </div>
    <div>

        <el-table
            v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true"
            style="width: 100%">
          <el-table-column
              prop="id"
              label="订单编号"
              width="180">
          </el-table-column>
          <el-table-column
            label="创建时间"
            align="center"
            prop="createTime"
            :formatter="dateFormatter"
            width="180px"
          />
          <el-table-column
              prop="productName"
              label="申请产品">
          </el-table-column>
          <el-table-column
              prop="amount"
              label="预估额度">
          </el-table-column>
          <el-table-column
              prop="applyState"
              label="订单状态">
            <template #default="scope">
              <span v-if="scope.row.applyState==0">失败</span>
              <span v-if="scope.row.applyState==1">待跟进</span>
              <span v-if="scope.row.applyState==2">跟进中</span>
              <span v-if="scope.row.applyState==3">已完成</span>
            </template>
          </el-table-column>
          <el-table-column label="实际放款额度" align="center" width="150px" >
            <template #default="scope">
              <el-statistic title="" :value="scope.row.practicalAmount" value-style="font-size:14px" />
            </template>
          </el-table-column>
          <el-table-column
              prop="address"
              label="操作">
            <template #default="scope">
            <el-button
              link
              type="primary"
              @click="openForm('look', scope.row.id)"
            >
              详情
            </el-button>
            </template>
          </el-table-column>
        </el-table>
    </div>
  </div>


  <div class="accinfor_box">
    <div class="title_filx">
      <div class="div_style"></div>
      <div class="div_title">其他信息记录</div>
    </div>

    <div>
      <div class="out_div">
        <div class="title_font">财富值</div>
        <div style="display: flex;justify-content: space-between">
          <div class="in_div">
            <div class="wealth_style">
              <div class="title">财富值总额：{{wealthData.all}}</div>
              <div class="wealth_item" v-for="item in wealthData.ewalthDataList" :key="item.id">
                <div class="title_left">
                  <div class="top">备注：{{item.notes}}</div>
                  <div class="bottom">{{formatDate(item.time)}}</div>
                </div>
<!--                <div class="title_right">+{{item.price}}</div>-->
                <div class="title_right" :class="{'increase': item.iorDecrease=='1'}">
                  {{item.iorDecrease=='0' ? '-' : '+'}} {{item.price}}
                </div>
              </div>
            </div>
          </div>
          <div class="in_div">
            <div class="wealth_style">
              <div class="title">我的推荐: ({{recommendation.all}})</div>
              <div style="padding: 10px;height: 25px" class="wealth_item" v-for="item in recommendation.ewalthDataList" :key="item.id">
                <img :src="item.img" style="width: 20px;height: 20px;margin-top: 2px;border-radius: 10px">
                <div style="" >{{item.name}}</div>
                <div>{{item.phone}}</div>
              </div>
            </div>
          </div>
          <div class="in_div">
            <div class="wealth_style">
              <div class="title">我的推荐人（上级）:（{{myrecommendation.all}}）</div>
              <div style="padding: 10px;height: 25px" class="wealth_item" v-for="item in myrecommendation.ewalthDataList" :key="item.id">
                <img :src="item.img" style="width: 20px;height: 20px;margin-top: 2px;border-radius: 10px">
                <div style="" >{{item.name}}</div>
                <div>{{item.phone}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>
</template>

<script setup lang="ts">

import * as UserApi from '@/api/hutai/clientpool';
import {dateFormatter, formatDate} from '@/utils/formatTime'

import { useRouter } from "vue-router";
import {ref} from "vue";
import * as UsersApi from "@/api/hutai/salesman";
const { push } = useRouter()

const router = useRouter();
const accountInformationList=ref({
})
const basicInformation =ref({
})
const carInformation=ref([])

let carList= ref([

])

const list = ref([])
const loading = ref(true) // 列表的加载中

UserApi.getUserInformation(router.currentRoute.value.query.id).then(res=>{

  accountInformationList.value=res
  basicInformation.value=res
  carInformation.value=res
  carList.value = res.carList

})

const recommendation= reactive({
  all:'',
  ewalthDataList:[
  ]
})
UsersApi.getHeRecommend(router.currentRoute.value.query.id).then(res=>{
  if(res==undefined) {
    recommendation.all=0
  }else{
    console.log(res,"他的推荐")
    recommendation.all=res.length
    for(var item in res){
      recommendation.ewalthDataList.push({id:item,img:res[item].avatar,name:res[item].name,phone:res[item].mobile})
    }
  }
})
const myrecommendation= reactive({
  all:'',
  ewalthDataList:[
  ]
})
UsersApi.getMiRecommend(router.currentRoute.value.query.id).then(res=>{
  if(res==undefined) {
    myrecommendation.all=0
  }else{
    myrecommendation.all=res.length
    for(var item in res){
      myrecommendation.ewalthDataList.push({id:item,img:res[item].avatar,name:res[item].name,phone:res[item].mobile})
    }
  }
})
const wealthData= reactive({
  all:"200.00",
  ewalthDataList:[

  ]
})
UsersApi.getWealthRecordList(router.currentRoute.value.query.id).then(res=>{
  wealthData.all=res.wealth
  for(const item in res.voList){
    wealthData.ewalthDataList.push({id:res.voList[item].id,notes:res.voList[item].remark,price:res.voList[item].wealthValue,
      time:res.voList[item].createTime,iorDecrease:res.voList[item].iorDecrease})
  }
})

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await UserApi.getUserclient(router.currentRoute.value.query.id)
    console.log(data)
    list.value = data
  } finally {
    loading.value = false
  }
}



const openForm = (type: string,orderNo: number) => {
  if (type == 'look') {
    // push('/guardPage/orderDetails?orderNo=' + orderNo);
    push({
      path:'/salesmanHome/salesmanHomeAllDetails',
      query:{id:orderNo}
    })
  }
}

    /** 初始化 **/
onMounted(() => {
  getList()
})

</script>
<style lang="scss">
.page-container {
  padding: 24px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-title {
  font-size: 20px;
  font-weight: 600;
  color: #1f2f3d;
  margin-bottom: 24px;
  padding-left: 12px;
  border-left: 4px solid #165dff;
}

.accinfor_box {
  width: 100%;
  min-height: 200px;
  margin-bottom: 24px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  padding: 24px;

  .title_filx {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .div_style {
      width: 3px;
      height: 16px;
      background-color: #165dff;
      border-radius: 2px;
    }

    .div_title {
      margin-left: 12px;
      font-size: 16px;
      font-weight: 600;
      color: #1f2f3d;
    }
  }
}

// 优化描述列表样式
.el-descriptions {
  .el-descriptions__label {
    background-color: #f5f7fa !important;
    color: #606266;
    font-weight: 500;
    padding: 12px 16px;
  }
  
  .el-descriptions__content {
    color: #303133;
    padding: 12px 16px;
  }

  .el-descriptions__cell {
    padding: 0;
  }
}

// 优化表格样式
.el-table {
  border-radius: 8px;
  overflow: hidden;
  margin-top: 16px;
  
  th {
    background-color: #f5f7fa !important;
    color: #606266;
    font-weight: 600;
    padding: 12px 0;
  }
  
  td {
    color: #303133;
    padding: 12px 0;
  }
  
  .el-button--link {
    padding: 4px 8px;
    font-size: 13px;
  }
}

// 优化统计数值样式
.el-statistic {
  .el-statistic__content {
    color: #165dff;
    font-weight: 600;
  }
}

// 优化财富值卡片样式
.wealth_style {
  width: 100%;
  min-height: 150px;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  background-color: #fff;
  border: 1px solid #ebeef5;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  
  .title {
    font-size: 16px;
    padding: 0 0 16px 0;
    font-weight: 600;
    color: #1f2f3d;
    border-bottom: 1px solid #ebeef5;
    margin-bottom: 16px;
  }
}

.wealth_item {
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #ebeef5;
  
  &:last-child {
    border-bottom: none;
  }
  
  .title_left {
    flex: 1;
    
    .top {
      font-size: 14px;
      color: #303133;
      margin-bottom: 6px;
    }
    
    .bottom {
      font-size: 15px;
      color: #909399;
    }
  }
  
  .title_right {
    font-size: 14px;
    font-weight: 500;
    color: #67c23a;
  }
}

.out_div {
  padding: 24px;
  width: 100%;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid #ebeef5;
  
  .title_font {
    color: #165dff;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid #ebeef5;
  }
}

.in_div {
  display: flex;
  gap: 24px;
  justify-content: space-between;
  flex-wrap: wrap;
  
  .wealth_style {
    flex: 1;
    min-width: 300px;
    
    .wealth_item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 0;
      
      img {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }
      
      div {
        font-size: 15px;
        color: #303133;
        
        &:last-child {
          color: #909399;
          font-size: 14px;
        }
      }
    }
  }
}

// 响应式布局优化
@media screen and (max-width: 768px) {
  .page-container {
    padding: 16px;
  }
  
  .accinfor_box {
    padding: 16px;
  }
  
  .in_div {
    flex-direction: column;
    
    .wealth_style {
      width: 100%;
    }
  }
  
  .el-descriptions {
    .el-descriptions__label,
    .el-descriptions__content {
      padding: 8px 12px;
    }
  }
}
</style>
